
<!-- 资产类型管理 -->
<template>
    <div class="page">
        <div class="nuclein-query">
            <div>资产类型管理</div>
            <div style="margin-left: auto;">
                <el-button size="mini" type="primary" @click="handlerAdd()">添加</el-button>
            </div>
        </div>
        <div class="content-row">
            <el-table :data="tableData" style="width: 100%" >
                <el-table-column prop="assetsTypeId" label="资产类型id">
                </el-table-column>
                <el-table-column prop="assetsTypeName" label="资产类型名称">
                </el-table-column>
                <el-table-column label="操作" width="180">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页 -->
        <div class="pagination">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
                :page-sizes="[10, 20, 30, 40]" :page-size="limit" layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
        <!-- 表单弹出框 -->
        <div>
            <el-dialog :title="title" :visible.sync="dialogFormVisible">
                <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
                    class="demo-ruleForm">
                    <el-form-item label="资产类型名称" prop="assetsTypeName">
                        <el-input v-model="ruleForm.assetsTypeName" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                        <el-button @click="dialogFormVisible = false">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import { getAssetsType, getAssetsTypeSave, getAssetsTypeDel } from '../../api/api'
import commonFunction from '../../utils/commonFunction'
export default {

  data () {
    const assetsTypeName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入资产类型名称'))
      } else {
        callback()
      }
    }
    return {
      dialogFormVisible: false,
      total: 10,
      page: 1,
      limit: 10,
      formLabelWidth: '140px',
      tableData: [],
      title: '添加',
      ruleForm: {
        assetsTypeName: ''
      },
      rules: {
        assetsTypeName: [
          { validator: assetsTypeName, trigger: 'blur' }
        ]

      }
    }
  },
  created () {
    // this.getDeviceId()
    this.gitList()
  },
  methods: {
    // 获取
    gitList () {
      const data = {
        page: this.page,
        size: this.limit
      }
      getAssetsType({ ...data }).then(res => {
        if (res.code == 0) {
          const { total, records } = res.page
          this.tableData = records
          this.total = total
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 获取设备id
    // getDeviceId() {
    //     getEquipment().then(res => {
    //         if (0 === res.code) {
    //             let { list } = res
    //             this.deviceIdList = list
    //         }
    //     })
    // },
    // 提交
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const data = {
            assetsTypeId: this.ruleForm.assetsTypeId ? this.ruleForm.assetsTypeId : null,
            assetsTypeName: this.ruleForm.assetsTypeName
          }
          getAssetsTypeSave(data).then(res => {
            if (res.code == 0) {
              this.ruleForm.assetsTypeName = ''
              this.$message.success(data.assetsTypeId != null ? '编辑成功' : '添加成功')
              this.gitList()
              this.dialogFormVisible = false
            } else {
              this.$message.error(res.msg)
            }
          })
        } else {
          return false
        }
      })
    },
    handlerAdd () {
      this.title = '添加'
      this.ruleForm.assetsTypeName = ''
      this.ruleForm.assetsTypeId = null
      this.dialogFormVisible = true
    },
    // 编辑
    handleEdit (row) {
      this.title = '编辑'
      this.dialogFormVisible = true
      this.ruleForm = {
        assetsTypeId: row.assetsTypeId,
        assetsTypeName: row.assetsTypeName
      }
    },
    handleDelete (index, row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const data = {
          assetsTypeId: row.assetsTypeId
        }
        getAssetsTypeDel({ ...data }).then(res => {
          if (res.code == 0) {
            this.$message.success('删除成功')
            this.gitList()
          } else {
            this.$message.error(res.msg)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 分页
    handleSizeChange (val) {
      this.limit = val
      this.gitList()
    },
    handleCurrentChange (val) {
      this.page = val
      this.gitList()
    }
  }
}
</script>

<style scoped>
.page {
    position: relative;
    height: 100%;
}

.nuclein-query {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid #DCDFE6;
}

.content-row {
    overflow: hidden;
}

/* 分页 */
.pagination {
    width: 100%;
    padding: 20px;
    border-top: 1px solid #DCDFE6;
}
</style>
